<template>
<div>
 <button @click="toggle()">{{show?'隐藏':'显示'}}</button>

 <lifecycle v-if="show" />
</div>
</template>
<script lang="ts">
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered} from "vue"

import lifecycle from "@/components/Lifecycle.vue"
import {ref} from "vue"

export default {
  components:{
    lifecycle
  },
  setup(){
    const show = ref(true);
     console.log('父组件setup!')
        onBeforeMount(() => {
        console.log('父组件setup=====>onBeforeMount!')
        })
        onMounted(() => {
        console.log('父组件setup=====>onMounted!')
        })
        onBeforeUpdate(() => {
        console.log('父组件setup=====>onBeforeUpdate!')
        })
        onUpdated(() => {
        console.log('父组件setup=====>onUpdated!')
        })
        onBeforeUnmount(() => {
        console.log('父组件setup=====>onBeforeUnmount!')
        })
        onUnmounted(() => {
        console.log('父组件setup=====>onUnmounted!')
        })
        onErrorCaptured((e) => {
        console.log(e,'父组件setup=====>onErrorCaptured!')
        })
        onRenderTracked((e) => {
        console.log(e,'父组件setup=====>onRenderTracked!')
        })
        onRenderTriggered((e) => {
        console.log(e,'父组件setup=====>onRenderTriggered!')
        })

    const toggle = ()=>{
      show.value = !show.value;
    }

    return {show,toggle}

  },
  beforeCreate(){
        console.log('父组件option=====>beforeCreate!')
    },
    created(){
        console.log('父组件option=====>created!')
    },
    beforeMount(){
        console.log('父组件option=====>beforeMount!')
    },
    mounted(){
        console.log('父组件option=====>mounted!')
    },
    beforeUpdate(){
        console.log('父组件option=====>beforeUpdate!')
    },
    updated(){
        console.log('父组件option=====>updated!')
    },
    beforeUnmount(){
        console.log('父组件option=====>vue2的beforeDestroy!vue3的beforeUnmount')
    },
    unmounted(){
        console.log('父组件option=====>vue2的destroyed!vue3的unmounted！')
    },
    // errorCaptured(err: any, vm: any, info: any){
    //     console.log(err, vm, info,'父组件option=====>errorCaptured!');
    //     return false
    // },
    // renderTracked(e){
    //    console.log(e,'父组件option=====>renderTracked!')
    // },
    // renderTriggered(e){
    //    console.log(e,'父组件option=====>renderTriggered!')
    // },
}
</script>
